<ion-header>

  <ion-toolbar>
    <ion-title>Map Card</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="map-cards">

  <ion-card>

    <img src="">
    <button ion-button icon-only fab fab-right fab-top>
      <ion-icon name="pin"></ion-icon>
    </button>

    <ion-item>
      <ion-icon item-left large name="football"></ion-icon>
      <h2>Museum of Football</h2>
      <p>11 N. Way St, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <ion-icon item-left large name="wine"></ion-icon>
      <h2>Institute of Fine Cocktails</h2>
      <p>14 S. Hop Avenue, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <span item-left>18 min</span>
      <span item-left>(2.6 mi)</span>
      <button ion-button icon-left primary clear item-right>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

  <ion-card>

    <img src="">
    <button ion-button danger fab fab-right fab-top>
      <ion-icon name="pin"></ion-icon>
    </button>

    <ion-item>
      <ion-icon item-left large name="cloud"></ion-icon>
      <h2>Yoshi's Island</h2>
      <p>Iggy Koopa</p>
    </ion-item>

    <ion-item>
      <ion-icon item-left large name="leaf"></ion-icon>
      <h2>Forest of Illusion</h2>
      <p>Roy Koopa</p>
    </ion-item>

    <ion-item>
      <span item-left>3 hr</span>
      <span item-left>(4.8 mi)</span>
      <button ion-button icon-left danger clear item-right>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

  <ion-card>

    <img src="">
    <button ion-button secondary fab fab-right fab-top>
      <ion-icon name="pin"></ion-icon>
    </button>

    <ion-item>
      <ion-icon item-left large name="information-circle"></ion-icon>
      <h2>Museum of Information</h2>
      <p>44 Rue de Info, 75010 Paris, France</p>
    </ion-item>

    <ion-item>
      <ion-icon item-left large name="leaf"></ion-icon>
      <h2>General Pharmacy</h2>
      <p>1 Avenue Faux, 75010 Paris, France</p>
    </ion-item>

    <ion-item>
      <span item-left secondary>26 min</span>
      <span item-left>(8.1 mi)</span>
      <button ion-button icon-left secondary clear item-right>
        <ion-icon name="navigate"></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

</ion-content>


<style>
  .map-cards img {
    height: 200px;
  }
</style>
